<template>
  <div id="process">
    <el-divider content-position="left">AB类项目总数</el-divider>
    <el-row :gutter="10">                
      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="阶段点评审流程"
          type="line"
          :data="periodLineData1"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_comments.period"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="客户投诉处理流程"
          type="line"
          :data="complaintLineData1"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_comments.complaint"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="Bug处理流程"
          type="line"
          :data="bugLineData1"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_comments.bug"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="版本Release流程"
          type="line"
          :data="releaseLineData1"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_comments.release"
          style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>

    <el-divider content-position="left">AB类项目覆盖率</el-divider>
    <el-row :gutter="10">                
      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="阶段点评审流程"
          type="line"
          :data="periodLineData2"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_cover_rate_comments.period"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="客户投诉处理流程"
          type="line"
          :data="complaintLineData2"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_cover_rate_comments.complaint"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="Bug处理流程"
          type="line"
          :data="bugLineData2"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_cover_rate_comments.bug"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="版本Release流程"
          type="line"
          :data="releaseLineData2"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.ab_project_cover_rate_comments.release"
          style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>

    <el-divider content-position="left">所有项目总数</el-divider>
    <el-row :gutter="10">                
      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="阶段点评审流程"
          type="line"
          :data="periodLineData3"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_comments.period"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="客户投诉处理流程"
          type="line"
          :data="complaintLineData3"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_comments.complaint"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="Bug处理流程"
          type="line"
          :data="bugLineData3"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_comments.bug"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="版本Release流程"
          type="line"
          :data="releaseLineData3"
          :settings="settings"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_comments.release"
          style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>

    <el-divider content-position="left">所有项目覆盖率</el-divider>
    <el-row :gutter="10">                
      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="阶段点评审流程"
          type="line"
          :data="periodLineData4"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_cover_rate_comments.period"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <v-charts
          headerTitle="客户投诉处理流程"
          type="line"
          :data="complaintLineData4"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_cover_rate_comments.complaint"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="Bug处理流程"
          type="line"
          :data="bugLineData4"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_cover_rate_comments.bug"
          style="padding: 10px">
        </el-input>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" class="marT">
        <v-charts
          headerTitle="版本Release流程"
          type="line"
          :data="releaseLineData4"
          :settings="settings2"
          :dataZoom="dataZoom"
          :data-empty="periodLineEmpty"
          :loading="periodLineLoading">
        </v-charts>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.comments.project_cover_rate_comments.release"
          style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VCharts from '@/components/charts/index' 

  export default {
    name: 'Process',
    inject: ['comment'],
    data() {
      return {
        periodLineEmpty: false,
        periodLineLoading: false,
        comments: '',
        periodLineData1: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        complaintLineData1: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        releaseLineData1: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        bugLineData1: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        periodLineData2: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        complaintLineData2: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        releaseLineData2: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        bugLineData2: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        periodLineData3: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        complaintLineData3: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        releaseLineData3: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        bugLineData3: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        periodLineData4: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        complaintLineData4: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        releaseLineData4: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },
        bugLineData4: {
          columns: ['examine_month', 'carLine', 'innovateLine', 'thingLine', 'solveLine', 'terminalLine'],
          rows: []
        },

        settings: {
          labelMap: {
            carLine: '智能汽车事业群(个)',
            innovateLine: '智能视觉事业群(个)',
            thingLine: '智能物联网事业群(个)',
            solveLine: '智能解决方案事业群(个)',
            terminalLine: '智能终端事业群(个)'
          }
        },
        settings2: {
          yAxisType: ['percent'],
          labelMap: {
            carLine: '智能汽车事业群(%)',
            innovateLine: '智能视觉事业群(%)',
            thingLine: '智能物联网事业群(%)',
            solveLine: '智能解决方案事业群(%)',
            terminalLine: '智能终端事业群(%)'
          }
        },
        dataZoom: [{
          type: 'slider',
          start: 0,
          end: 100
        }]
      }
    },
    components: {
      VCharts
    },
    props: {
      trendList: Object
    },
    methods: {
      getLineDataKey(arr) {
        if(!arr.length) {
          return []
        }
        let result = arr.map(val => {
          return {
            examine_month: val.month,
            carLine: val['30'],
            innovateLine: val['31'],
            thingLine: val['23'],
            solveLine: val['265'],
            terminalLine: val['261']
          }
        })
        return result
      }
    },
    watch: {
      trendList: {
        handler: function() {
          if(this.trendList) {
            Object.keys(this.trendList).forEach((item, index) => {
              this['periodLineData' + (index + 1)].rows = this.getLineDataKey(this.trendList[item].period)
              this['complaintLineData' + (index + 1)].rows = this.getLineDataKey(this.trendList[item].complaint)
              this['bugLineData' + (index + 1)].rows = this.getLineDataKey(this.trendList[item].bug)
              this['releaseLineData' + (index + 1)].rows = this.getLineDataKey(this.trendList[item].release)
            })
          }
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .marT{
    margin-top: 20px;
  }
  #process >>> .el-divider__text{
    background-color: #e4393c;
  }
  /deep/ .el-divider__text.is-left{
    left: 55px;
  }
</style>